<template>
	<view class='container adddrug'>
	  <view class='adddrug_search'>
		<text class='iconfont icon-sousuo1'></text>
		<!-- <input placeholder='输入药品首字母检索' :value='inputValue' v-model="keyword" confirm-type="search" confirm="confirm($event)"></input> -->
		<!-- <input placeholder='输入药品首字母检索' :value='inputValue' :model="keyword"  @tap='start_searchinput'></input> -->
		<input class="uni-input" confirm-type="search"  @input="onKeyInput" :value='inputValue' placeholder="输入药品首字母检索"  />
		<text class='iconfont icon-guanbi-' @tap='clearInputEvent'></text>
	  </view>
	  <view class='search_ul' v-if="hidd">
		<view class="search_li" v-for="(item,index) in drug" :key='index' @tap='start_search(index)'>
		  <view class='drug_left'>
			<text class='drug_left_name'>{{item.name}}</text>
			<text>30mg*7片/盒</text>
		  </view>
		  <view class='drug_right'>
			<text>陕西利君制药有限公司</text>
			<text>饭后口服，一次2粒，一日1次</text>
		  </view>
		</view>
	  </view>
	  <view class='search_ul' v-if="!hidd">
		<view class='title'>
		  药品名称
		  <text>（点击药名设置用量）</text>
		  规格
		</view>
		<view class="search_li editordrug_li" v-for="(item,index) in editordrug" :key='index' @click='start_editor'>
		  <view class='editordrug_li_left'>
			<text>{{item.name}}</text>
			<text> (30mg*7片/盒）</text>
		  </view>
		  <text>1次10mg;1日3次</text>
		  <!-- <cover-view class='iconfont icon-guanbi-' v-on:click.stop="start_delete" @click="start_delete"></cover-view> -->
		  <text class='iconfont icon-guanbi-' v-on:click.stop="start_delete(index)" ></text>
		</view>
		<button class='generate_button' @tap='start_sure'><text>2</text>确定</button>
	  </view>
	  <view class='drugnone' v-if="drugnone">
		<image src='/static/index_23.png'></image>
		<text>未检索到药品</text>
		<button class='generate_button' @tap='start_selfbuilt'>+自建药品</button>
	  </view>
	</view>

</template>

<script>
		export default{	
		data(){
			return{
			  // 药品库
				drug: [
				  { name: '布洛芬胶囊' },
				  { name: '布洛芬胶囊' },
				  { name: '布洛芬胶囊' },
				  { name: '布洛芬胶囊' },
				],
				//编辑药品
				editordrug:[
				  { name: '盐酸吡格列' },
				  { name: '盐酸吡格列' },
				  { name:'盐酸吡格列'},
				],
				hidd:true,
				drugnone: true,
				inputValue:''
			}
		},
		methods:{
			start_searchinput(e){
				console.log(e)
			},
			//清空输入的内容
			clearInputEvent(){
				console.log(this.inputValue)
				this.inputValue=''
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
				console.log(this.inputValue)
			},
			// 搜索
			start_search(index){
				console.log(index)
				this.hidd=false
			},
			// 确认编辑
			start_sure(){
				uni.navigateBack({
				  delta: 1
				})
			},
			// 编辑药品
			start_editor(){
				uni.navigateTo({
					url: '../editor/editor'
				});
			},
			// 删除编辑药品
			start_delete(index){
				console.log(index)
				console.log('删除编辑药品')
			},
			start_selfbuilt(){
				uni.navigateTo({
					url: '../selfbuilt/selfbuilt'
				});				
			}
		} 
	}
</script>

<style>
	.adddrug_search input{
	  color: #999;
	  font-size: 26upx;
	  padding-left: 15upx;
	  width: 83%;
	}
	.adddrug_search{
	  display: flex;
	  align-items: center;
	  border-radius: 50upx;
	  border: 1px solid #ccc;
	  margin: 17upx 110upx;
	  padding: 0 25upx;
	}
	.adddrug_search text{
	  color: #c3c3c3
	}
	.adddrug_search .icon-sousuo1{
	  font-size: 32upx;
	  font-weight: 600
	}
	/* 药品库 */
	.search_li{
	  height: auto;
	  color: #666;
	  font-size: 28upx;
	  padding: 15upx 30upx;
	 
	 
	  border-bottom: 1px solid #f0f0f0;
	  display: flex;
	  justify-content: space-between;
	 
	}
	.search_li .drug_left{
	  display: flex;
	  flex-direction: column;
	  width: 30%;
	}
	.search_li .drug_left text{
	  line-height: 60upx;
	  height: 60upx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space:nowrap;

	}
	.search_li .drug_right{
	  display: flex;
	  flex-direction: column;
	  width: 70%;
	  padding-left: 55upx;
	  box-sizing: border-box;

	}
	.search_li .drug_right text{
	  height: 60upx;
	  line-height: 60upx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space:nowrap;
	}
	.drug_left_name{
	  color: #108ec9;
	  font-size: 30upx;
	}
	.generate_button{
	  margin: 40upx 60upx;
	  background: #108ec9;
	  line-height: 85upx;
	  height: 85upx;
	  color: #fff;
	  font-size: 30upx;
	}
	.search_li:active{
	  background: #f5f5f5
	}
	/* 编辑药品 */
	.search_ul .title{
	  display: flex;
	  align-items: center;
	  background: #f5f5f5;
	  height: 90upx;
	  line-height: 90upx;
	  padding: 0 30upx;
	  font-size: 28upx;
	}
	.search_ul .title text{
	  color:#666666;
	  font-size: 24upx;
	}
	.editordrug_li{
	  height: 90upx;
	  line-height: 90upx;
	  padding: 0 30upx;
	}
	.editordrug_li text{
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  color: #333;
	}
	.editordrug_li .editordrug_li_left{
	  width: 55%;
		white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  font-size: 28upx
	}
	.editordrug_li .iconfont{
	  color:#c3c3c3
	}
	.editordrug_li .editordrug_li_left text:nth-child(2){
	  font-size: 24upx;
	}
	/* .editordrug_li text:nth-child(1){
	  width: 40%;
	  padding: 0 30upx;
	  box-sizing: border-box;
	} */
	.generate_button{
	  margin: 40upx 60upx;
	  background: #108ec9;
	  line-height: 85upx;
	  height: 85upx;
	  color: #fff;
	  font-size: 30upx;
	  font-weight: normal;
	}
	.generate_button text{
	  background: #fff;
	  color: #108ec9;
	  border-radius: 50%;
	  margin: auto 20upx auto;
	  padding: 0 10upx;
	  font-size: 26upx;
	}
	/* 无商品展示 */
	.drugnone{
	  display: flex;
	  justify-content: center;
	  padding: 100upx 60upx;
	  flex-direction: column;
	  align-items: center;
	  box-sizing: border-box
	}
	.drugnone image{
	  height: 350upx;
	  width: 350upx;
	}
	.drugnone button{
	  width: 100%;
	}
</style>
